<template>
  <div class="nav">
    <div class="sidebar">
      <el-menu
        class="sidebar-el-menu"
        :default-active="onRoutes"
        background-color="#383f5b"
        text-color="#B2BADA"
        active-text-color="#B2BADA"
        router
        style="letter-spacing: 1px"
      >
        <template v-for="(item, idx) in items">
          <template v-if="item.subs">
            <el-submenu :index="item.index" :key="item.index">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-submenu
                  v-if="subItem.subs"
                  :index="subItem.index"
                  :key="subItem.index"
                  :route="{ query: subTtem }"
                >
                  <template slot="title">{{ subItem.title }}</template>
                  <el-menu-item
                    v-for="(threeItem, i) in subItem.subs"
                    :key="i"
                    :index="threeItem.index"
                    >{{ threeItem.title }}</el-menu-item
                  >
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="subItem.index"
                  :key="subItem.index"
                  >{{ subItem.title }}</el-menu-item
                >
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
          <div
            class="cut_offs"
            :key="idx + 's'"
            v-show="item.index == '/home' || item.index == '/finance'"
            style="height: 1px"
          ></div>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { getResources, getUnlook } from "@/api";
export default {
  data() {
    return {
      navs: [],
      items: [
        { title: "首页", icon: "el-home-avg", index: "/home" },
        {
          title: "人员管理",
          icon: "el-iconkehu",
          index: 1,
          subs: [
            { title: "人员列表", index: "/memberlist" },
             { title: "用户使用时间", index: "/membertimelist" }
          ],
        }
      ],
      homes: false,
      password: "",
    };
  },
  created() {
    if(!this.Cookie.get('accessToken')){
      this.$router.push({ path: "/login" });
    }
  },
  methods: {
    getPaths(paths) {
      this.$router.push({ path: paths });
    },
  },
  computed: {
    onRoutes() {
      document.title = this.$route.name;
      return this.$route.path;
    },
  },
  watch: {
    $route: {
      handler(newData, oldData) {
        if (newData) {
          console.log(newData);
        } else {
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 100%;
  background-color: #383f5b;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
}
.navclass {
  margin-bottom: 10px;
}
.navclass h1 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #303133;
  cursor: pointer;
}
.navclass .navid {
  font-size: 12px;
  line-height: 26px;
  color: #303133;
  cursor: pointer;
}
.el-home-avg {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask: url("../../assets/home.svg");
  mask: url("../../assets/home.svg");
  mask-size: 100% 100%;
  vertical-align: sub;
  margin-right: 16px;
}
.el-iconkehu {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask: url("../../assets/client.svg") no-repeat;
  mask: url("../../assets/client.svg") no-repeat;
  mask-size: 100% 100%;
  vertical-align: middle;
  margin-right: 16px;
}
.el-adimg {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask: url("../../assets/ad.svg") no-repeat;
  mask: url("../../assets/ad.svg") no-repeat;
  mask-size: 100% 100%;
  vertical-align: middle;
  margin-right: 16px;
}
.el-media {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask: url("../../assets/media.svg") no-repeat;
  mask: url("../../assets/media.svg") no-repeat;
  mask-size: 100% 100%;
  vertical-align: middle;
  margin-right: 16px;
}
.el-datas {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask: url("../../assets/data.svg") no-repeat;
  mask: url("../../assets/data.svg") no-repeat;
  mask-size: 100% 100%;
  vertical-align: middle;
  margin-right: 16px;
}
.el-finance {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask: url("../../assets/finance.svg") no-repeat;
  mask: url("../../assets/finance.svg") no-repeat;
  vertical-align: middle;
  margin-right: 16px;
}
.el-point {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask: url("../../assets/project.svg") no-repeat;
  mask: url("../../assets/project.svg") no-repeat;
  vertical-align: middle;
  margin-right: 16px;
}
.el-project {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask: url("../../assets/project.svg") no-repeat;
  mask: url("../../assets/project.svg") no-repeat;
  vertical-align: middle;
  margin-right: 16px;
}
.el-menu-item.is-active {
  border-left: 3px solid #367fff !important;
  background: rgb(45, 50, 73) !important;
}
.hovs {
  border-left: 3px solid #367fff !important;
  background: rgb(45, 50, 73);
}
.cut_offs {
  background: #60657c;
  margin: 16px 20px 16px 20px;
}
.sidebar {
  display: block;
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 240px;
  font-size: 12px;
  padding-top: 50px;
  box-sizing: border-box;
}
.sidebar-el-menu[data-v-d73fd082]:not(.el-menu--collapse) {
  background-color: #383f5b !important;
}
.sidebar > ul {
  height: 100%;
}
.sidebar > ul > li {
  border-left: 3px solid #383f5b;
  box-sizing: border-box !important;
}
.submenu__title {
  position: relative;
}
.el-submenu .el-submenu__title {
  background-color: #383f5b !important;
  color: #fff !important;
}
.el-submenu__title span {
  font-size: 12px !important;
  font-weight: 600;
}
.el-submenu .el-menu-item {
  min-width: 180px !important;
  padding-left: 68px !important;
  border-left: 3px solid #383f5b;
}
.el-submenu .el-menu-item:hover {
  border-left: 3px solid #367fff !important;
}
.el-menu-item {
  font-size: 12px !important;
}
.el-menu-item span {
  font-weight: 600;
}
.lookScreen {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: 99;
}
.lookScreen .lookbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 260px;
  background: #fff;
  box-sizing: border-box;
  padding: 40px 20px;
}
.lookScreen .lookbox .title {
  font-size: 20px;
  text-align: center;
  color: #333;
  font-weight: 600;
}
.lookScreen .lookbox .passbox {
  height: 40px;
  width: 300px;
  box-sizing: border-box;
  padding-left: 20px;
  margin: 40px 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.lookScreen .lookbox .lookBtn {
  height: 40px;
  width: 300px;
  box-sizing: border-box;
  margin: 0 30px;
  border-radius: 4px;
  background: cornflowerblue;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}
</style>